<template>
  <div class="search_container">
    <div class="search_header">
      <!-- 相关内容列表 -->
      <div class="search_container_list">
        <div
          class="search_container_list_item"
          v-for="(item, i) in list"
          :key="i"
          :class="{ active: i === index }"
          @click="toggleActive(i, item.path)"
        >
          {{ item.title }}
        </div>
      </div>
      <!-- 搜索框 -->
      <div class="search_container_search">
        <i class="iconfont icon-fangdajing" @click="beginSearch"></i>
        <input
          type="input"
          v-model="innerSearch"
          @keyup.enter="beginSearch"
          name=""
          id=""
          class="w-100"
          :placeholder="`在「${list[index].title}」搜索`"
        />
      </div>
    </div>
    <!-- 没有搜索到内容情况 -->
    <div class="empty_box">
      <Empty :title="list[index].title" :keyword="emptyKeyword"></Empty>
    </div>
    <!-- 路由组件 -->
    <!-- :class="{ active: reqFlag }" -->
    <div class="router_box" ref="selfReqCode">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { limit } from "@/settings";
import { SUCCESS } from "@/utils/constant";
import Empty from "./components/Empty";
import { Loading } from "element-ui";
import { throttle } from "lodash";

export default {
  name: "MySearch",
  components: { Empty },
  data() {
    return {
      // 服务loading
      loadingInstance: null,
      // 搜索内容
      keyword: "",
      index: 0,
      // 内部搜索内容
      innerSearch: "",
      // 空内容展示文字
      emptyKeyword: "",
      // 节流搜索请求
      reqFlag: false,
      // 搜索标题列表
      list: [
        {
          title: "文章",
          path: "/search/article",
        },
        {
          title: "用户",
          path: "/search/user",
        },
      ],
      // 展示骨架屏
      // skeletonFlag: false,
      // 搜索到的内容
      content: [],
    };
  },
  watch: {
    $route: {
      deep: true,
      handler() {
        this.handlerIndex();
        this._init_getSearchKeyword();
        this.beginSearch();
      },
    },
  },
  methods: {
    resetInfo() {
      this.content = [];
    },
    toggleActive: throttle(function (i, path) {
      // 当前分类不能点击当前分类
      if (this.index === i) return;
      this.resetInfo();
      this.index = i;
      this.$router.push(`${path}?s=${this.innerSearch}`);
    }, 1000),
    // 根据关键词搜索内容
    // beginSearch: throttle(function () {
    beginSearch() {
      if (this.reqFlag) return;
      // 开始阀门
      this.reqFlag = true; // 搜索
      // 开始转圈提醒用户，正在发送中
      this.loadingInstance = Loading.service({
        target: this.$refs.selfReqCode,
      });

      let { index, innerSearch } = this;
      this.$router.replace(`${this.$route.path}?s=${innerSearch}`);
      this.$api
        .searchContent({
          index,
          keyword: innerSearch ? innerSearch : " ",
          limit,
        })
        .then((res) => {
          if (res.code === SUCCESS) {
            this.content = res.data;
            this.reqFlag = false; // 搜索
            // 以服务的方式调用的 Loading 需要异步关闭
            this.$nextTick(() => {
              this.loadingInstance.close();
            });

            this.emptyKeyword = innerSearch;
          }
        });
      // }, 500),
    },
    // 重新设置index
    handlerIndex() {
      this.list.forEach((item, i) => {
        if (this.$route.path.indexOf(item.path) !== -1) {
          this.index = i;
        }
      });
    },
    // 获取搜索关键词
    _init_getSearchKeyword() {
      this.keyword = this.$route.query.s;
      this.innerSearch = this.$route.query.s;
    },
  },
  mounted() {
    this.handlerIndex();
    this._init_getSearchKeyword();
    this.beginSearch();
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 768px) {
  .search_container {
    .search_container_list_item {
      font-size: 14px;
    }
    .search_container_search {
      padding: 0 8px;
      margin: 12px 8px 0;
      i {
        font-size: 18px;
      }
      & > input {
        border-radius: 4px;
        font-size: 13px;
      }
    }
  }
}
@media screen and (min-width: 768px) {
  .search_container {
    max-width: 1200px;
    margin: 0 auto;
    .search_header {
      padding: 40px 0 20px;
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f3f3f3;
      .search_container_list {
        flex: auto;
        align-items: center;
        max-width: 50%;
      }
      .search_container_search {
        background-color: #f5f5f5;
        border-radius: 50px;
        padding: 3px 24px;
        margin: 0;
      }
    }
    .search_container_list {
      .search_container_list_item {
        font-size: 18px;
      }
    }
  }
}
@media screen and (min-width: 640px) {
  .search_container {
    .search_container_list_item {
      font-size: 18px;
    }
    .search_container_search {
      padding: 8px 8px;
      margin: 12px 8px 0;
      i {
        font-size: 20px;
      }
      & > input {
        border-radius: 4px;
        font-size: 16px;
      }
    }
  }
}
.search_container {
  padding: 0 5px 54px;
  // 修改文章的margin左右外边距
  /deep/.article-item {
    margin: 0 10px;
  }
  // 加载框的内容
  /deep/.el-loading-mask {
    position: static !important;
    width: 100% !important;
    min-height: calc((100vh - 197px));
    .el-loading-spinner {
      width: 100%;
      position: static;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .search_container_list {
    display: flex;
    margin-top: 10px;
    .search_container_list_item {
      cursor: url("@/assets/mouse/x2.cur"), auto !important;
      padding: 0 8px 8px;
      position: relative;
      &.active::after {
        content: "";
        height: 2px;
        width: calc(100% - 20px);
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: red;
        margin: 0 auto;
      }
    }
  }
  .search_container_search {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    background-color: #eee;
    i {
      color: #666;
      margin-top: 2px;
      font-weight: 700;
    }
    & > input {
      padding-left: 8px;
      background: transparent;
      color: #666;
      height: 35px;
      outline: none;
      border: 1px solid transparent;
      transition: 0.3s;
    }
  }
  .empty_box {
    display: block;
    &.active {
      display: block;
    }
  }
}
</style>